<template>
  <div class="changePassword">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
    <div style="padding: 16px">
      <van-form @submit="onSubmit">
        <van-field v-if="this.walletPassSatus" v-model="phone" label="手机号" />
        <van-field v-if="this.walletPassSatus" v-model="smsCaptchaResult" center clearable required label="短信验证码" placeholder="验证码">
          <template #button>
            <van-button slot="button" size="small" type="primary" native-type="button" v-if="!countDown" @click="sendVerifyCode">发送验证码</van-button>
            <van-button slot="button" size="small" type="primary" :disabled="true" v-else>已发送{{ countDown }}s</van-button>
          </template>
        </van-field>
        <van-field :value="walletPassword" type="password" readonly clickable name="密码" label="密码" placeholder="密码" @touchstart.native.stop="show = true"
          :rules="[{ required: true, message: '请填写密码' }]" />

        <van-field v-model="conWalletPassword" @touchstart.native.stop="showCon = true" type="password" readonly clickable name="确认密码" label="确认密码" placeholder="确认密码" :rules="[
            { required: true, message: '请填写密码' },
            {
              validator: (value, rule) => checkConWalletPassword(value, rule),
              message: '两次输入的密码不一致',
            },
          ]" />
        <div style="margin: 16px 0">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    <van-number-keyboard :maxlength="6" v-model="walletPassword" :show="show" @blur="show = false" />
    <van-number-keyboard :maxlength="6" v-model="conWalletPassword" :show="showCon" @blur="showCon = false" />
  </div>
</template>
  
<script>
export default {
  computed: {
    userInfo() {
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        return JSON.parse(userInfo);
      }
      return {};
    },
  },
  watch: {
    show(val) {
      if (val) {
        this.showCon = false;
      }
    },
    showCon(val) {
      if (val) {
        this.show = false;
      }
    },
  },
  data() {
    return {
      show: false,
      showCon: false,
      smsUuid: "",
      codeUrl: "",
      walletPassSatus: true,
      phone: localStorage.getItem("username"),
      title: "修改支付密码",
      smsCaptchaResult: "",
      walletPassword: "",
      conWalletPassword: "",
      countDown: 0, // 倒计时
    };
  },
  methods: {
    // 4.获取手机验证码
    async sendVerifyCode() {
      const params = {
        phone: this.userInfo.phonenumber,
        uuid: this.uuid,
      };
      // 4.2 获取短信验证码
      this.$post("/customer/wallet/updatePwdOfSms", params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.smsUuid = res.data;
          this.$toast({
            message: "短信发送成功",
            duration: 800,
          });
          this.countDown = 60;
          this.timeIntervalID = setInterval(() => {
            this.countDown--;
            // 4.1 如果减到0 则清除定时器
            if (this.countDown == 0) {
              clearInterval(this.timeIntervalID);
            }
          }, 1000);
        } else {
          //
        }
      });
    },
    checkConWalletPassword() {
      return this.walletPassword === this.conWalletPassword;
    },
    onClickLeft() {
      this.$router.push("/wallet");
    },
    onSubmit(values) {
      if (this.walletPassSatus && this.smsCaptchaResult.length < 1) {
        this.$toast({
          message: "请输入短信验证码",
          duration: 800,
        });
        return;
      }
      console.log("submit", values);
      const params = {
        walletPassword: this.walletPassword,
        conWalletPassword: this.conWalletPassword,
      };
      if (this.walletPassSatus) {
        params.code = this.smsCaptchaResult;
        params.uuid = this.smsUuid;
      }
      const url = this.walletPassSatus
        ? "/customer/wallet/updatePwd"
        : "/customer/wallet/setPwd";
      this.$post(url, params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.$toast({
            message: "操作成功",
            duration: 800,
          });
          this.$router.push("./wallet");
        }
      });
    },
  },
  mounted() {
    this.walletPassSatus = this.$route.query.walletPassSatus;
    this.title = this.walletPassSatus ? "修改支付密码" : "设置密码";
    if (this.walletPassSatus) {
    }
  },
};
</script>
<style scoped lang="less">
.changePassword {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}
.login-code {
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
<style>
.van-key__wrapper {
  text-align: center !important;
}
.van-password-input__item i {
  margin-top: 0;
}
</style>
